<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            width: 180px;
            height: 280px;
            border: 1px solid #999;
            border-radius: 8px;
            margin-left: 50px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 280px;
        }
        .num,
        .next,
        .pre{
            padding: 10px;
            border: 1px solid #999;
            cursor: pointer;
        }
        /* 一个元素有两个class。不能加空格，加了就是父子关系 */
        .num.active {
            background-color: #56a5f1;
            color: #fff;
        }
        .num:hover {
            color: red;
        }
        .not {
            cursor: not-allowed;
            background-color: #999;
            color: #fff;
        }
    </style>
</head>
<body>
    <p>待完善的功能：上一页和下一页的功能需要完善，在第一页时禁用上一页；
        在末叶时禁用下一页；其他页面正常使用</p>
    <div id="content"></div>
    <span class="pre" onclick="pre()">上一页</span>
    <span id="pages"></span>
    <span class="next" onclick="next()">下一页</span>
    <script>
        // 总页数
        var pageNum = 5;
        // span的内容
        var pageContent = '';
        // 当前是第几页
        var currentPage = 1;
        var btns = document.getElementsByClassName('num');
        for (var i = 0; i < pageNum; i++) {
            pageContent += `<span
                class="num"
                onclick="changePage(${i+1})"
            >第${i+1}页</span>`;
        }
        pages.innerHTML = pageContent;
        // 调用函数，更新页面
        showPage ();

        // 跳转页面
        function changePage (num) {
            // 清空激活样式
            btns[currentPage-1].classList.remove('active');
            currentPage = num;
            showPage ();
        }
        // 更新页面，更新按钮的激活状态
        function showPage () {
            // 显示当前页码
            content.innerHTML = `当前是第${currentPage}页`;
            // 设置激活按钮的样式
            // classList 会返回指定元素的class列表
            btns[currentPage-1].classList.add('active');
        }
        // 上一页
        function pre () {
            // 清空激活样式
            btns[currentPage-1].classList.remove('active');
            // 判断，页面大于2才能看上一页
            if(currentPage > 1) {
                currentPage --
            }
            showPage ();
        }
        // 下一页
        function next () {
            // 清空激活样式
            btns[currentPage-1].classList.remove('active');
            // 判断，页面小于总页数pageNum
            if(currentPage < pageNum) {
                currentPage ++
            }
            showPage ();
        }
    </script>
</body>
</html>